<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHeader @add="onAdd" />
    <TodoMain :list="list" @del="onDel" />
    <TodoFooter :total="list.length" @clear="onClear" />
  </section>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  name: 'App',
  data () {
    return {
      // list 数据定义在 App 组件中最合适，因为不光 TodoMain 组件要使用，TodoFooter 也要用
      // 优先从本地存储中取数据进行渲染，如果取不到，再用默认数据
      list: JSON.parse(localStorage.getItem('list')) || [
        { id: 1, name: '吃饭饭' },
        { id: 2, name: '睡觉觉' },
      ]
    }
  },
  watch: {
    // 要不要开启深度监听，就是看要不要监听复杂数据内部的数据变化
    // 这里只要监听 list 本身的变化即可，所以只需要普通监听即可
    list(newValue) {
      localStorage.setItem('list', JSON.stringify(newValue))
    }
  },
  methods: {
    onClear() {
      this.list = []
    },
    onDel(id) {
      // 将列表中 id 不等于 传进来的 id 的任务对象 过滤出来（留下的）
      this.list = this.list.filter(v => v.id !== id)
    },
    onAdd(name) {
      // 自己能不能操作自己的数据？可以
      this.list.unshift({
        id: Date.now(),
        name
      })
    }
  }
}
</script>

<style>

</style>
